<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>微信支付</title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style type="text/css">
        body {
            font-family: "Microsoft YaHei";
        }

        .pay-box {
            position: absolute;
            top: 50%;
            margin-top: -516px;
            left: 50%;
            margin-left: -320px;
        }

        .ico {
            width: 240px;
            height: 240px;
            border-radius: 120px;
            background: #3FB837;
            color: #fff;
            display: inline-block;
            font-size: 160px;
            line-height: 240px;
        }

        .txt {
            font-size: 42px;
            padding-top: 30px;
            color: #333;
        }

        .val {
            font-size: 80px;
            font-weight: bold;
        }

        .pay {
            width: 640px;
            height: 100px;
            margin-top: 100px;
            padding: 20px;
            border-radius: 10px;
            font-size: 42px;
            color: #fff;
            background: #07BF05;
            border: 0px;
            text-align: center;
        }

        a {
            color: #fff;
            background: transparent !important;
        }
    </style>
</head>

<body>
    <div class="pay-box" style="text-align: center;">
        <div class="ico">
            ￥
        </div>
        <div class="txt">
            支付金额
        </div>
        <div class="val">
            ￥<span>100</span>
            <!-- 这里使用原生PHP echo输出需要支付的价格 -->
        </div>
        <a class="pay" href=""><button class="pay">确认支付</button></a>
        <!-- 这里点击调起微信支付页面 mweb_url  -->
    </div>
    <script>
        // a页面，仅做逻辑演示，更加具体的逻辑需要自己完善
        // 判断是否微信浏览器
        function isWeChat() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true;
            } else {
                return false;
            }
        }

        if (!isWeChat()) {
            // 非微信内打开的产品页面
            alert('微信外不支持JSAPI支付，请在微信中打开页面');
            return false;
        }

    </script>
</body>

</html>